<template>
  <el-card shadow="never" class="aui-card--fill">
    <div class="mod-IsWeatherDay__isweatherday">
      <el-form
        :inline="true"
        :model="dataForm"
        @keyup.enter.native="getDataList()"
      >
        <el-form-item>
          <el-date-picker
            style="width: 100%"
            value-format="yyyy-MM-dd"
            v-model="dataForm.dateTime"
            type="date"
            placeholder="气象日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button @click="getDataList()">{{ $t("query") }}</el-button>
        </el-form-item>
      </el-form>
      <el-table
        v-loading="dataListLoading"
        :data="dataList"
        border
        @selection-change="dataListSelectionChangeHandle"
        @sort-change="dataListSortChangeHandle"
        style="width: 100%"
      >
        <el-table-column
          prop="dateTime"
          label="日期"
          header-align="center"
          align="center"
          sortable="custom"
          width="160"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          prop="dayWindD"
          label="白天风向"
          header-align="center"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="dayWindV"
          label="白天风速"
          header-align="center"
          align="center"
          sortable="custom"
          width="110"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          prop="dayWtString"
          label="白天天气描述"
          header-align="center"
          align="center"
          width="110"
        ></el-table-column>
        <el-table-column
          prop="maxTemp"
          label="最高气温"
          header-align="center"
          align="center"
          sortable="custom"
          width="110"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          prop="minTemp"
          label="最低气温"
          header-align="center"
          align="center"
          sortable="custom"
          width="110"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          prop="nightWindD"
          label="夜晚风向"
          header-align="center"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="nightWindV"
          label="夜晚风速"
          header-align="center"
          align="center"
          sortable="custom"
          width="110"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          prop="nightWtString"
          label="夜晚天气描述"
          header-align="center"
          align="center"
          width="110"
        ></el-table-column>
        <el-table-column
          prop="weekDay"
          label="星期几"
          header-align="center"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="wind"
          label="风向风速"
          header-align="center"
          align="center"
          width="120"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          :label="$t('handle')"
          fixed="right"
          header-align="center"
          align="center"
          width="150"
        >
          <template slot-scope="scope">
            <el-button
             v-if="$hasPermission('admin:weatherday:page')"
              type="text"
              size="small"
              @click="showDetails(scope.row.id)"
              >详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="page"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="limit"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="pageSizeChangeHandle"
        @current-change="pageCurrentChangeHandle"
      >
      </el-pagination>
      <!-- 详情 -->
      <el-dialog
        :visible="visible"
        title="详情"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        @close="visible = false"
        :destroy-on-close="true"
        width="80%"
        top="10px"
      >
        <el-table
          v-loading="dataListLoading"
          :data="detailsList"
          border
          style="width: 100%"
        >
          <el-table-column
            prop="reportDate"
            label="报告时间"
            header-align="center"
            align="center"
            width="160"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            prop="dateTime"
            label="日期"
            header-align="center"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="dateTime2"
            label="日期段"
            header-align="center"
            align="center"
            width="160"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <!-- <el-table-column prop="date" label="日期时间戳" header-align="center" align="center"></el-table-column> -->
          <el-table-column
            prop="maxTemp"
            label="最高气温"
            header-align="center"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="minTemp"
            label="最低气温"
            header-align="center"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="rain"
            label="降水量"
            header-align="center"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="temp"
            label="气温"
            header-align="center"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="vis"
            label="能见度"
            header-align="center"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="rh2"
            label="空气湿度"
            header-align="center"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="aqi"
            label="空气质量"
            header-align="center"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="aqiCn"
            label="空气质量描述"
            header-align="center"
            align="center"
            width="120"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            prop="pm25"
            label="PM2.5指数"
            header-align="center"
            align="center"
            width="110"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            prop="comfortCn"
            label="舒适度描述"
            header-align="center"
            align="center"
            width="120"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            prop="wdCn"
            label="风向风速描述"
            header-align="center"
            align="center"
            width="120"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            prop="wdCnSimplied"
            label="风向风速简述"
            header-align="center"
            align="center"
            width="120"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            prop="wdCnFull"
            label="风向风速全述"
            header-align="center"
            align="center"
            width="120"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            prop="weatherString"
            label="天气类型"
            header-align="center"
            align="center"
            width="120"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            prop="windD"
            label="风向"
            header-align="center"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="windV"
            label="风速"
            header-align="center"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="tg"
            label="体感温度"
            header-align="center"
            align="center"
          ></el-table-column>
        </el-table>
        <el-pagination
          :current-page="1"
          :page-sizes="[30]"
          :page-size="30"
          :total="detailsTotal"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="pageSizeChangeHandle"
          @current-change="pageCurrentChangeHandle"
        >
        </el-pagination>
        <template slot="footer">
          <el-button @click="visible = false" >{{ $t("cancel") }}</el-button>
        </template>
      </el-dialog>
    </div>
  </el-card>
</template>

<script>
import mixinViewModule from "@/mixins/view-module";
export default {
  mixins: [mixinViewModule],
  data() {
    return {
      visible: false,
      mixinViewModuleOptions: {
        getDataListURL: "/sys/weatherday/page",
        getDataListIsPage: true,
      },
      detailsList: [],
      detailsTotal: 0,
      dataForm: {
        order: " desc",
        orderField: "date_time",
      },
    };
  },
  methods: {
    showDetails(dayId) {
      this.visible = true;
      this.$http
        .get("/sys/weatherhour/page", {
          params: {
            page: 1,
            limit: 30,
            dayId,
          },
        })
        .then(({ data: res }) => {
          if (res.code == 0) {
            this.detailsList = res.data.list;
            this.detailsTotal = res.data.total;
          } else this.$message.error(res.msg);
        });
    },
  },
};
</script>
<style scoped lang="scss">
::v-deep .el-dialog {
  height: calc(100% - 20px);
  overflow-y: auto;
}
</style>
